<template>
	<view class="theme-container" :style="themeStyle">
		<view class="button-group" :style="{ backgroundColor: themeStyle.cardBackground }">
			<view class="button-group-item" @click="handleThemeChange('default')" :style="{ borderBottomColor: themeStyle.borderColor }">
				<text class="item-text" :style="{ color: themeStyle.color }">默认主题</text>
				<view class="theme-preview default" :class="{ active: themeStore.theme === 'default' }" :style="{ borderColor: themeStyle.borderColor }"></view>
			</view>
			<view class="button-group-item" @click="handleThemeChange('dark')" :style="{ borderBottomColor: themeStyle.borderColor }">
				<text class="item-text" :style="{ color: themeStyle.color }">暗黑主题</text>
				<view class="theme-preview dark" :class="{ active: themeStore.theme === 'dark' }" :style="{ borderColor: themeStyle.borderColor }"></view>
			</view>
			<view class="button-group-item" @click="handleThemeChange('blue')" :style="{ borderBottomColor: themeStyle.borderColor }">
				<text class="item-text" :style="{ color: themeStyle.color }">天蓝主题</text>
				<view class="theme-preview blue" :class="{ active: themeStore.theme === 'blue' }" :style="{ borderColor: themeStyle.borderColor }"></view>
			</view>
			<view class="button-group-item" @click="handleThemeChange('orange')" :style="{ borderBottomColor: themeStyle.borderColor }">
				<text class="item-text" :style="{ color: themeStyle.color }">橘色主题</text>
				<view class="theme-preview orange" :class="{ active: themeStore.theme === 'orange' }" :style="{ borderColor: themeStyle.borderColor }"></view>
			</view>
			<view class="button-group-item" @click="handleThemeChange('purple')" :style="{ borderBottomColor: themeStyle.borderColor }">
				<text class="item-text" :style="{ color: themeStyle.color }">紫色主题</text>
				<view class="theme-preview purple" :class="{ active: themeStore.theme === 'purple' }" :style="{ borderColor: themeStyle.borderColor }"></view>
			</view>
		</view>
		
		<!-- 预览区域 -->
		<view class="preview-section" :style="{ backgroundColor: themeStyle.cardBackground }">
			<view class="preview-title" :style="{ color: themeStyle.color }">主题预览</view>
			
			<!-- 按钮预览 -->
			<view class="preview-item">
				<view class="preview-label" :style="{ color: themeStyle.color }">按钮</view>
				<view class="preview-content">
					<button type="primary" class="preview-button" :style="{ backgroundColor: themeStyle.primaryColor, color: themeStyle.textInverse }">主要按钮</button>
					<button type="default" class="preview-button" :style="{ backgroundColor: themeStyle.cardBackground, color: themeStyle.color, borderColor: themeStyle.borderColor }">默认按钮</button>
					<button type="warn" class="preview-button" :style="{ backgroundColor: themeStyle.errorColor, color: themeStyle.textInverse }">警告按钮</button>
				</view>
			</view>
			
			<!-- 输入框预览 -->
			<view class="preview-item">
				<view class="preview-label" :style="{ color: themeStyle.color }">输入框</view>
				<view class="preview-content">
					<input type="text" placeholder="请输入内容" class="preview-input" :style="{ backgroundColor: themeStyle.cardBackground, color: themeStyle.color, borderColor: themeStyle.borderColor }" />
				</view>
			</view>
			
			<!-- 列表预览 -->
			<view class="preview-item">
				<view class="preview-label" :style="{ color: themeStyle.color }">列表</view>
				<view class="preview-content">
					<view class="preview-list" :style="{ backgroundColor: themeStyle.cardBackground }">
						<view class="preview-list-item" :style="{ borderBottomColor: themeStyle.borderColor }">
							<text :style="{ color: themeStyle.color }">列表项 1</text>
							<text class="preview-list-item-right" :style="{ color: themeStyle.textSecondary }">></text>
						</view>
						<view class="preview-list-item" :style="{ borderBottomColor: themeStyle.borderColor }">
							<text :style="{ color: themeStyle.color }">列表项 2</text>
							<text class="preview-list-item-right" :style="{ color: themeStyle.textSecondary }">></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 卡片预览 -->
			<view class="preview-item">
				<view class="preview-label" :style="{ color: themeStyle.color }">卡片</view>
				<view class="preview-content">
					<view class="preview-card" :style="{ backgroundColor: themeStyle.cardBackground }">
						<view class="preview-card-title" :style="{ color: themeStyle.color }">卡片标题</view>
						<view class="preview-card-content" :style="{ color: themeStyle.textSecondary }">卡片内容</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useThemeStore } from '@/stores/theme'
import { ref, computed } from 'vue'

const themeStore = useThemeStore()

// 获取主题样式
const themeStyle = computed(() => {
	// #ifdef MP
	return uni.getStorageSync('theme-style') || {}
	// #endif
	
	// #ifdef H5
	return {
		backgroundColor: 'var(--background-color)',
		color: 'var(--text-color)',
		cardBackground: 'var(--card-background)',
		primaryColor: 'var(--primary-color)',
		successColor: 'var(--success-color)',
		warningColor: 'var(--warning-color)',
		errorColor: 'var(--error-color)',
		infoColor: 'var(--info-color)',
		borderColor: 'var(--border-color)',
		textInverse: 'var(--text-color-inverse)',
		textSecondary: 'var(--text-color-secondary)',
		textDisabled: 'var(--text-color-disabled)',
		textPlaceholder: 'var(--text-color-placeholder)'
	}
	// #endif
})

const handleThemeChange = (theme) => {
	themeStore.setTheme(theme)
	uni.showToast({
		title: '主题切换成功',
		icon: 'success'
	})
}
</script>

<style lang="scss">
.theme-container {
	padding: 40rpx;
	min-height: 100vh;
}

.button-group {
	padding: 0 40rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
}

.button-group-item {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	border-bottom: 1px solid;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.item-text {
		font-size: 32rpx;
	}
	
	.theme-preview {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 2rpx solid;
		position: relative;
		
		&.default {
			background-color: #f8f8f8;
		}
		
		&.dark {
			background-color: #333333;
		}
		
		&.blue {
			background-color: #E3F2FD;
		}
		
		&.orange {
			background-color: #FFF3E0;
		}
		
		&.purple {
			background-color: #F3E5F5;
		}
		
		&.active::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 20rpx;
			height: 20rpx;
			background-color: var(--primary-color);
			border-radius: 10rpx;
		}
	}
	
	&:last-child {
		border-bottom: none;
	}
}

.preview-section {
	padding: 40rpx;
	border-radius: 20rpx;
}

.preview-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.preview-item {
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.preview-label {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.preview-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.preview-button {
	margin: 0;
}

.preview-input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border: 1px solid;
	border-radius: 8rpx;
}

.preview-list {
	border-radius: 8rpx;
	overflow: hidden;
}

.preview-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1px solid;
	
	&:last-child {
		border-bottom: none;
	}
	
	text {
		font-size: 28rpx;
	}
	
	.preview-list-item-right {
		font-size: 28rpx;
	}
}

.preview-card {
	border-radius: 8rpx;
	padding: 20rpx;
}

.preview-card-title {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.preview-card-content {
	font-size: 26rpx;
}
</style> 